<template>
  <div>
    <div class="msg"></div>
    <div class="home">
      <img class="img1" src="../../assets/sx.png" alt srcset />
      <div class="dv" ref="jt">
        <img class="img1 img2" src="../../assets/sx.png" alt srcset />
      </div>
      <div class="dv2"></div>
      <div class="tiao">
        <div :class="[num==1?'bg':'bgr']" ref="bg"></div>
        <div class="btn" ref="hua" @touchstart="start" @touchmove="move" @touchend="end">
          <van-icon class="icond" name="down" />
        </div>
      </div>
      <div class="top" :class="[num==1?'bgblue':'']">{{title}}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "yzm",
  data() {
    return {
      num: 0,
      distance: 0,
      title: "请拖动滑块完成验证",
    };
  },
  methods: {
    start(e) {
      this.startX = e.touches[0].clientX;
    },
    move(e) {
      let x = e.touches[0].clientX - this.startX;
      this.distance = x;
      if (x < 0) {
        x = 0;
      } else if (x > 300 - this.$refs.hua.offsetWidth) {
        x = 300 - this.$refs.hua.offsetWidth;
      }
      this.$refs.hua.style.left = x + "px";
      this.$refs.jt.style.left = x + "px";
      this.$refs.bg.style.width = x + "px";
    },
    end() {
      if (this.distance > 120 && this.distance < 130) {
        this.num = 1;
        this.$emit("sure", true);
        this.title = "验证成功";
      } else {
        this.$refs.hua.style.left = 0 + "px";
        this.$refs.jt.style.left = 5 + "px";
        this.$refs.bg.style.width = 0 + "px";
        this.$emit("sure", false);
        this.title = "验证失败";
      }
    },
  },

  mounted() {},
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}

.msg {
  background-color: #000;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.3;
}

.bgblue {
  color: #409eff;
}

.home {
  width: 300px;
  height: 225px;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background-color: #ffffff;
  padding: 5px;
}

.top {
  margin-top: 10px;
}

.img1 {
  width: 300px;
  height: 150px;
}

.dv {
  width: 52px;
  height: 52px;
  border: 1px solid #cccccc;
  overflow: hidden;
  position: absolute;
  left: 5px;
  top: 5px;
  z-index: 9;
}

.dv2 {
  width: 50px;
  height: 50px;
  /* border: 1px solid red; */
  background-color: #ffffff;
  opacity: 0.5;
  box-shadow: 10px 10px 5px #888888;
  position: absolute;
  top: 5px;
  left: 125px;
}

.img2 {
  position: absolute;
  top: 0px;
  left: -120px;
}

.tiao {
  width: 300px;
  height: 30px;
  position: relative;
}

.btn {
  width: 52px;
  height: 100%;
  background-color: rgb(149, 233, 233);
  position: absolute;
  top: 0;
  text-align: center;
  line-height: 100%;
}

.bg {
  width: 5px;
  height: 100%;
  background-color: #409eff;
  opacity: 0.6;
  border: 2px solid #409eff;
  box-sizing: border-box;
}

.bgr {
  width: 5px;
  height: 100%;
  background-color: #ff0000;
  opacity: 0.6;
  border: 2px solid #ff0000;
  box-sizing: border-box;
}

.icond {
  transform: rotate(-90deg);
  font-size: 25px;
}
</style>
